<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.wrap {
				background-color: #fff;
				border: 1px solid #000;
				border-radius: 5px;
				margin: 20px auto;
				min-width: 100px;
				width: 40%;
				zoom: 1;
			}
			
			.wrap:after {
				content: '';
				clear: both;
				display: block;
				visibility: hidden;
			}
			
			.last {
				margin-bottom: 2.5%;
			}
			
			.wrap>div {
				border-radius: 5px;
				margin-top: 2.5%;
				margin-left: 2.5%;
				padding-top: 30%;
				width: 30%
			}
		</style>
		<style>
			.one {
				font-size: 0;
			}
			
			.one>div {
				margin-top: 2.5%;
				margin-left: 2.5%;
				padding-top: 30%;
				width: 30%;
				background-color: orange;
				display: inline-block;
			}
		</style>
		<style>
			.two>div {
				float: left;
				background: darkcyan;
			}
		</style>
		<style>
			.three {
				display: table;
			}
			
			.three>div {
				background: aquamarine;
				float: left;
				display: table-cell;
			}
		</style>
		<style>
			.four {
				width: 38%;
				padding: 1%;
			}
			
			.four>div {
				float: left;
				background-color: cornflowerblue;
				margin: 0;
				padding-top: 32%;
				width: 32%;
			}
			
			div.have {
				margin-left: 2%;
				margin-right: 2%;
			}
			
			div.has {
				margin-top: 2%;
				margin-bottom: 2%;
			}
		</style>
		<style>
			.five {
				display: flex;
				flex-wrap: wrap;
			}
			
			.five>div {
				background: gray;
				flex-grow: 3;
				margin: 1.6%;
			}
		</style>
		<style>
			.six {
				padding: 1%;
				width: 36vw;
			}
			
			.six>div {
				background-color: lavender;
				float: left;
				width: 11vw;
				height: 11vh;
				padding: 0;
				margin: 0.5vw;
			}
		</style>
	</head>

	<body>

		<div class="wrap one">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div class="last"></div>
			<div class="last"></div>
			<div class="last"></div>
		</div>
		<div class="wrap two">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div class="last"></div>
		</div>
		<div class="wrap three">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div class="last"></div>
		</div>
		<div class="wrap four">
			<div></div>
			<div class="have"></div>
			<div></div>
			<div class="has"></div>
			<div class="have has"></div>
			<div class="has"></div>
			<div></div>
			<div class="have"></div>
			<div></div>
		</div>
		<div class="wrap five">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div class="wrap six">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</body>

</html>